// 1.导入react依赖的包
import React from 'react';
import ReactDOM from 'react-dom/client';
import "./style/index.css";
// 2.创建项目跟实例ReactDOM.createRoot（spa应用根组件挂载点元素DOM对象）
const root = ReactDOM.createRoot(document.getElementById('root'));
// 练习列表循环
const list1 = [
  { id: 1, name: '黑马86期', salary: 11000 },
  { id: 2, name: '黑马87期', salary: 12000 },
  { id: 3, name: '黑马88期', salary: 18000 }
]

/**
 * jsx样式
 * 1.行内样式
 *    style={{css属性名：css属性值，css属性名：css属性值...}}
 * 注意：有横杆的采用大驼峰
 * 2.类名控制
 */

const list1box=(
  <>
  <div style={{border:'5px solid skyblue',padding:'10px'}}>
    <ul>
         {list1.map(item=><li key={item.id}><h3>班级:{item.name}</h3><p>工资:{item.salary}</p></li>)}
    </ul>
 
  </div>
  <hr />
  <div className='box'>123</div>
  </>
)
// 3.使用root根实例绘制用户界面
root.render(
  list1box
);